<script setup>
import { ref, reactive, onMounted } from "vue";
import { nanoid } from 'nanoid'
import Help from '@/components/Help.vue'
import haoyongnotes from '@/assets/cover/haoyongnotes.png'
const show = ref(false);
const index = ref(0);
const there = ref(false);
const contentList = reactive([
  {
    name: "图片",
    type: ['生活'],
    url: "./imagePendant/",
    size: {
      width: 2,
      height: 2,
    },
    index: 2
  },
  {
    name: "快捷启动",
    type: ['工具'],
    url: "./folderPendant/",
    size: {
      width: 2,
      height: 2,
    },
    index: 9
  },
  {
    name: "日历",
    type: ['生活'],
    url: "./calendarPendant/",
    size: {
      width: 3,
      height: 3,
    },
    index: 10
  },
  {
    name: "天气",
    type: ['生活'],
    url: "./weatherPendant/",
    size: {
      width: 2,
      height: 2,
    },
    index: 6
  },
  {
    name: "木鱼",
    type: ['娱乐'],
    url: "./woodenFishPendant/",
    size: {
      width: 2,
      height: 2,
    },
    index: 7
  },
  {
    name: "便签",
    type: ['办公'],
    url: "./notesPendant/",
    size: {
      width: 2,
      height: 2,
    },
    index: 11
  },
  {
    name: "倒计时",
    type: ['生活'],
    url: "./countdownPendant/",
    size: {
      width: 2,
      height: 2,
    },
    index: 1
  },
  {
    name: "每日计划",
    type: ['办公'],
    url: "./dailyPlannerPendant/",
    size: {
      width: 3,
      height: 4.5,
    },
    index: 8
  },
  {
    name: "实时网速",
    type: ['工具'],
    url: "./internetPendant/",
    size: {
      width: 2.3,
      height: 0.5,
    },
    index: 12
  },
  {
    name: '柱形音频',
    type: ['娱乐'],
    url: './audioPendant/',
    size: {
      width: 12,
      height: 1.8,
    },
    index: 3
  },
  {
    name: '方块音频',
    type: ['娱乐'],
    url: './audioDomainPendant/',
    size: {
      width: 11,
      height: 2.1,
    },
    index: 5
  },
  {
    name: '闹钟',
    type: ['生活'],
    url: './alarmClockPendant/',
    size: {
      width: 2,
      height: 2,
    },
    index: 4
  },
  // {
  //   name: '快递查询（测试）',
  //   type: ['生活'],
  //   url: './kuaidiPendant/',
  //   size: {
  //     width: 4,
  //     height: 2,
  //   }
  // },
  {
    name: '热点',
    type: ['生活'],
    url: './hotspotPendant/',
    size: {
      width: 4,
      height: 2,
    },
    index: 0
  },
  {
    name: '好用便签',
    type: ['生活', '工作'],
    url: './haoyongnotesPendant/',
    image: haoyongnotes,
    size: {
      width: 3.6,
      height: 4,
    },
    comwin: {
      resizable: false,
    },
    index: 14
  },
  {
    name: '愉悦',
    type: ['生活'],
    url: './pleasurePendant/',
    size: {
      width: 2,
      height: 2,
    },
    index: 13
  },
  {
    name: '番茄时钟',
    type: ['生活', '工作'],
    url: './tomatoPendant/',
    // image: haoyongnotes,
    size: {
      width: 2,
      height: 1,
    },
    index: 15
  },
  // {
  //   name: '番茄',
  //   type: ['办公'],
  //   url: './pomoguruPendant/',
  //   size: {
  //     width: 2,
  //     height: 0.6,
  //   },
  //   store: 'pomoguru-store'
  // }, 
]);
const list = ref([]);
const openComponent = (item) => {
  if(window.utools){
    window.createWinChild({
      url: item.url,
      size: {
        width: item.size.width,
        height: item.size.height
      },
      nanoid: item.store ? item.store : item.url + nanoid(),
      ...item.comwin
    });
  }
};

if(window.utools){
  utools.onPluginEnter(() => {
    there.value = window.utools.isDarkColors() ? true : false;
  })
}


onMounted(async() => {
  list.value = contentList;

  if(window.utools){
    there.value = window.utools.isDarkColors() ? true : false;
  }

  if(window.utools){
    let wins = window.utools.dbStorage.getItem('window_components')
    if(!wins.length)return;
    for (let index = 0; index < wins.length; index++) {
      const element = wins[index];
      let defaultConfig = contentList.find(item => item.url === element.url);
      await window.createWinChild({ ...element , ...defaultConfig.comwin})
    }
  }
});

const helpHandle = () => {
  show.value = true;
}

const selectionType = (e) => {
  index.value = parseInt(e.currentTarget.dataset.index);
  let text = e.currentTarget.innerText.split(/\s/).join('');
  if(index.value === 0){
    list.value = contentList;
  }else{
    list.value = contentList.filter(item => item.type.some(tag => tag === text));
  }
}
</script>

<template>

  <div :class="['home-view', {'light': !there, 'dark': there}]">
    <div class="home-all-list-box">
      <ul class="home-all-list">
        <li :class="{'list-active': index === 0}" @click="selectionType" data-index="0"><span>全</span><span>部</span></li>
        <li :class="{'list-active': index === 1}" @click="selectionType" data-index="1"><span>生</span><span>活</span></li>
        <li :class="{'list-active': index === 2}" @click="selectionType" data-index="2"><span>工</span><span>具</span></li>
        <li :class="{'list-active': index === 3}" @click="selectionType" data-index="3"><span>娱</span><span>乐</span></li>
        <li :class="{'list-active': index === 4}" @click="selectionType" data-index="4"><span>办</span><span>公</span></li>
      </ul>
      <div :class="['switch-there', {'there-active': there}]" @click="there = !there">
        <div class="switch-box">
          <IconSvg name="sun" class="icon-sun icon" />
          <IconSvg name="moon" class="icon-moon icon" />
        </div>
      </div>
    </div>
    <div class="home-all-content">
      <div class="question-mark" @click="helpHandle">?</div>
      <div class="home-all-box-content">
        <div
          v-for="item in list.sort((a, b) => b.index - a.index)"
          :key="item.name"
          class="home-all-content-item"
          :style="{
            width: 150 + 'px',
            height: 150 + 'px',
          }"
          @click="openComponent(item)"
        >
          <div class="home-all-content-item-img" v-if="item?.image">
            <img class="home-all-content-item-bg" :src="item.image" />
          </div>
          <iframe
            v-else
            width="100%"
            height="100%"
            :src="item.url + 'index.html?tag=1'"
            frameborder="0"
            style="pointer-events: none"
            name="counter"
          ></iframe>
          <div class="home-all-content-item-name">{{ item.name }}</div>
        </div>
      </div>
    </div>
    <Help v-model:show="show" />
  </div>
  <!-- <img style="display: none;" src="https://api.likepoems.com/counter/get/@homePendant1101" alt="homePendant1101" /> -->
</template>

<style lang="scss" scoped>
//浅色
.light{
  --bg-color: rgb(244, 245, 246);
  --bg-list-color: rgb(244, 245, 246);
  --bg-select: rgb(248, 249, 251);
  --font-color: rgb(75, 72, 74);
  --font-active: rgb(51, 51, 51);
  --border-line: rgba(8, 8, 8, 0.1);
  --shadow-color: rgba(0, 0, 0, 0.2);
}

// 深色
.dark{
  --bg-color: rgb(36, 37, 41);
  --bg-list-color: rgb(36, 37, 41);
  --bg-select: rgb(53, 53, 55);
  --font-color: rgb(141, 133, 128);
  --font-active: rgb(226, 222, 209);
  --border-line: rgba(218, 217, 215, 0.1);
  --shadow-color: rgba(255, 255, 255, 0.1);
}

.home-view {
  display: flex;
  height: 100%;
  .home-all-list-box{
    width: 180px;
    display: flex;
    justify-content: center;
    background-color: var(--bg-list-color);
    border-right: 1px solid var( --border-line);
    padding: 10px 0;
    position: relative;
    transition: all 0.3s linear;
    .home-all-list {
      width: 130px;
      font-size: 14px;
      text-align: center;
      color: var(--font-color);
      border-radius: 10px;
      li {
        padding: 12px 0;
        display: flex;
        justify-content: space-evenly;
        user-select: none;
        cursor: pointer;
      }

      .list-active {
        border-radius: 10px;
        background-color: var(--bg-select);
        color: var(--font-active);
        box-shadow: 0 0 10px var(--shadow-color);
      }
    }

    .switch-there{
      position: absolute;
      width: 90px;
      height: 40px;
      border: 1px solid var(--border-line);
      // left: 0;
      bottom: 10px;
      font-size: 20px;
      border-radius: 20px;

      .switch-box{
        position: absolute;
        top: 0;
        bottom: 0;
        left: 10px;
        width: 20px;
        height: 20px;
        margin: auto 0;
        transition: all 0.2s linear;
        .icon {
          position: absolute;
          left: 0;
          top: 0;
          transition: all 0.2s linear;
        }

        .icon-sun{
          transform: scale(1.2);
          opacity: 1;
        }
        .icon-moon{
          opacity: 0;
        }
      }

      &.there-active{

        .switch-box{
          left: calc(100% - 20px - 10px);

          .icon-sun{
            opacity: 0;
          }
          .icon-moon{
            opacity: 1;
          }
        }
       
      }
      
    }


  }

  
  .home-all-content {
    background-color: var(--bg-color);
    width: calc(100% - 180px);
    height: 100%;
    padding: 20px;
    transition: all 0.3s linear;
    .home-all-box-content {
      overflow-y: auto;
      height: 100%;
      .home-all-content-item {
        display: inline-block;
        transition: all 0.2s linear;
        margin: 15px;
        box-shadow: 0 0 10px var(--shadow-color);
        border-radius: 15px;
        // background-color: #36373e;

        &:hover {
          transform: scale(1.05);
        }

        .home-all-content-item-img{
          display: flex;
          padding: 5px;
          justify-content: center;
          height: 100%;
          img{
            height: 100%;
          }
        }
      }

      .home-all-content-item-name{
        text-align: center;
        font-size: 12px;
        color: var(--font-color);
        font-weight: 700;
      }
    }

    .question-mark{
      position: fixed;
      bottom: 50px;
      right: 50px;
      width: 50px;
      height: 50px;
      font-size: 30px;
      text-align: center;
      line-height: 50px;
      color: var(--font-color);
      border-radius: 50%;
      background-color: var(--bg-select);
      box-shadow: 3px 3px 10px var(--shadow-color);
      cursor: pointer;
      user-select: none;
    }
  }
}
</style>
